<template>
  <div id="loadBox">
    <div class="load-container" >
      <div class="loader"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name : 'LoadView'
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common.less";
  #loadBox{
    position: fixed;z-index: 10;left: 0;top:0;width: 100%;height: 100%;
    background: rgba(255,255,255,0.1);
  }
  .load-container{padding:20px 0;text-align:center;.tranY50;position: absolute;.tranX50;top:50%;left: 50%;margin-top: -50px;}
  .load-container p{display:inline-block;position:relative;top:-30px;padding-left:15px;font-size:14px;color:#0fa4f6;}
  .load-container .loader{display:inline-block;font-size:30px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:0.8em auto;position:relative;-webkit-animation:load 1.7s infinite ease;animation:load 2s infinite ease;}
  @-webkit-keyframes load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
    5%,
    95%{box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
    30%{box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.51em -0.66em 0 -0.42em #0fa4f6,-0.75em -0.36em 0 -0.44em #0fa4f6,-0.83em -0.03em 0 -0.46em #0fa4f6,-0.81em 0.21em 0 -0.477em #0fa4f6;}
    55%{box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.29em -0.78em 0 -0.42em #0fa4f6,-0.43em -0.72em 0 -0.44em #0fa4f6,-0.52em -0.65em 0 -0.46em #0fa4f6,-0.57em -0.61em 0 -0.477em #0fa4f6;}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
  }
  @keyframes load{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
    5%,
    95%{box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
    30%{box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.51em -0.66em 0 -0.42em #0fa4f6,-0.75em -0.36em 0 -0.44em #0fa4f6,-0.83em -0.03em 0 -0.46em #0fa4f6,-0.81em 0.21em 0 -0.477em #0fa4f6;}
    55%{box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.29em -0.78em 0 -0.42em #0fa4f6,-0.43em -0.72em 0 -0.44em #0fa4f6,-0.52em -0.65em 0 -0.46em #0fa4f6,-0.57em -0.61em 0 -0.477em #0fa4f6;}
    100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em -0.83em 0 -0.4em #0fa4f6,-0.11em -0.83em 0 -0.42em #0fa4f6,-0.11em -0.83em 0 -0.44em #0fa4f6,-0.11em -0.83em 0 -0.46em #0fa4f6,-0.11em -0.83em 0 -0.477em #0fa4f6;}
  }
</style>
